<template>
  <div>
    <!-- Form -->

    <el-dialog
      :title="info.isAdd ? '添加' : '修改'"
      :visible.sync="info.isshow"
      @close="close"
    >
      <el-form :model="form">
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="规格属性"
          :label-width="formLabelWidth"
          v-for="(item, index) in arr"
          :key="item.id"
        >
          <div class="flexbtn">
            <el-input v-model="item.data" autocomplete="off"></el-input>
            <el-button
              v-if="index == 0"
              type="primary"
              @click="arr.push({ data: '' })"
              >新增规格属性</el-button
            >
            <el-button v-else type="danger" @click="del(index)">删除</el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-switch
            v-model="form.status"
            inactive-text="状态"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="add">{{
        info.isAdd ? "添加" : "修改"
      }}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqspecsadd,
  reqspecsinfo,
  reqspecsedit,
  reqspecslist,
} from "../../../http/api";
import { successAlert } from "../../../utils/alert";
export default {
  props: ["info"],
  data() {
    return {
      form: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      arr: [{ data: "" }, { data: "" }],
      dialogFormVisible: true,

      formLabelWidth: "120px",
    };
  },
  //请求角色数据 遍历所属角色
  mounted() {},
  methods: {
    setForm() {
      this.form = {
        specsname: "",
        attrs: "",
        status: 1,
      };
      this.arr = [{ data: "" }, { data: "" }];
    },
    //删除规格属性框
    del(e) {
      this.arr.splice(e, 1);
    },
    //请求列表数据
    add() {
      if (this.info.isAdd) {
        //转为后端需要的格式
        this.form.attrs = this.arr.map((item) => item.data).join(",");
        reqspecsadd(this.form).then((res) => {
          if (res.data.code == 200) {
            //弹成功
            successAlert(res.data.msg);
            //清空form
            this.setForm();
            //弹框消失
            this.info.isshow = false;
            //列表刷新
            this.$emit("init");
          }
        });
      } else {
        this.form.attrs = this.arr.map((item) => item.data).join(",");
        
        reqspecsedit(this.form).then((res) => {
          if (res.data.code == 200) {
            //弹成功
            successAlert(res.data.msg);
            //清空form
            this.setForm();
            //弹框消失
            this.info.isshow = false;
            //列表刷新
            this.$emit("init");
          }
        });
      }
    },
    //请求一条要修改的数据
    getOne(id) {
      reqspecsinfo({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.form = res.data.list[0];
          this.arr = this.form.attrs.map((item) => ({ data: item }));
        }
      });
    },
    //如果是编辑的蒙层关闭了 清空form
    close() {
      if (this.info.isAdd == false) {
        this.setForm();
      }
    },
  },
};
</script>

<style>
.el-switch {
  margin-left: 80px;
}
.flexbtn {
  display: flex;
}
.flexbtn .el-input {
  flex: 1;
}
</style>
